<template>
  <div class="main">
    <!-- 顶部导航 -->
    <fold-nav />
    <el-row justify="center">
      <el-col :span="20">
        <suspense>
          <!-- 主要页面 -->
          <router-view></router-view>
        </suspense>
      </el-col>
    </el-row>
  </div>
  <!-- 音乐控制台 -->
  <drawer />
  <!-- 占位 -->
  <interval height="100" />
  <!-- 底部导航 -->
  <bottom-navbar />
</template>

<script lang="ts">
/* 功能模块引入 */
import { defineComponent } from 'vue'
/* 组件引入 */
import FoldNav from '@/components/foldNav/foldNav.vue'
import BottomNavbar from '@/components/bottom-navbar/bottom-navbar.vue'
import Drawer from '@/components/drawer/drawer.vue'
import Interval from '@/components/interval/interval.vue'

export default defineComponent({
  /* 子组件注册 */
  components: {
    FoldNav,
    BottomNavbar,
    Drawer,
    Interval
  },

  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.main {
}
</style>
